<template>
    <div id="AssMeration"style="overflow-x: hidden;">
      <div @click.stop="plec">
        <div class="header"style="display: none;">
          <div>
            <span class="el-icon-close"></span>
          </div>
          <div>
            <!--<span>新款夜视变色太阳镜眼镜会变色墨镜驾驶眼镜21</span>-->
          </div>
          <div>
            <span class="el-icon-more"></span>
          </div>
        </div>
        <div style="width: 100%;height: 42.5px;background-color: #ffd7d7;position: relative;"><span style="text-align: center;line-height: 42.5px;color: #df0f1d;position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);width: 100%;">{{row.team_num_no==0?'抱歉！此团已满,掐指一算，您就是下一位团长(☆＿☆)':DataList.limit_one == true?'此商品为限购商品，您已购过此商品':row.team_num_no==1?'参团支付成功后，立马组团成功':'终于等到您了~'}}</span></div>
        <div class="group">
          <div class="left">
            <div>
              <img :src="imgTitl+thumb" alt=""width="100%"height="100%">
            </div>
          </div>
          <div class="right2" style="width: 100%;">
            <div style="margin-left: 3px;">
              <div>
                <span>拼团</span>
                <span style="text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;width: 70%;">{{GoodLisr.goods_title}}</span>
              </div>
              <!--<div>-->
              <!--<span>新款夜视变色太阳镜眼镜会变色墨镜驾驶眼镜</span>-->
              <!--</div>-->
            </div>
            <div class="money" style="">
            <span>
              <span style="color: #b52046;">￥</span><span style="color: #b52046;">{{team_price}}</span>
            </span>
              <span>
              <span>
                <del style="color: silver;">￥{{market_price}}</del>
              </span>
           </span>
            </div>
            <div style="width: 135px;height: 20.5px;border-radius: 10px;border: 1px solid #ec0f44;margin-left: 13px;margin-top: 7px;text-align: center;">
              <span style="line-height: 20px;font-size: 12px;color: #ec0f44;text-align: center;">拼团为您节省{{market_price-GoodLisr.spec[0].team_price}}元</span>
            </div>
          </div>
        </div>
        <div class="conten">
          <p style="line-height: 40px;text-align: center;"><span style="color: #f20c34;font-weight: bold;"v-show="row.team_num_no != 0">还差{{row.team_num_no}}人组团成功~拼拼更划算哦</span></p>
          <p style="line-height: 40px;text-align: center;"><span style="color: #f20c34;font-weight: bold;"v-show="row.team_num_no == 0">(☆＿☆)</span></p>
          <p style="line-height: 40px;text-align: center;"><span style="color: #f20c34;font-weight: bold;"v-show="DataList.limit_one">抱歉！您已达限购次数，不能参团~</span></p>
          <!--还差{{row.team_num_no}}人组团成功~拼拼更划算哦-->
          <div  style="width: 100%;height: 116px;">
            <!-- Swiper -->
            <div class="swiper-container" style="height: 100%;">
              <div class="swiper-wrapper" style="height: 100%;">
                <div class="swiper-slide" style="width: 77.5px;height: 77.5px;background-color: #0C0C0C;border-radius: 50%;text-align: center;color: white;position: relative;"v-for="(item,index) in List">
                  <img :src="item.u_headimgurl" alt=""width="100%" height="100%"style="border-radius: 50%;">
                  <p style="position:absolute;top: 67px;text-align: center;color: black;">{{item.u_nickname}}</p>
                </div>
              </div>
            </div>
          </div>
          <div>
            <p style="color: #bb0022;margin-left: 15px;margin-right: 36px;line-height: 30px;">支付成功后即为参团成功，为您节省{{GoodLisr.spec[0].team_price}}元，请您耐心等待开奖，若人数不足。系统将自动退款。</p>
          </div>
          <div class="huaxian">
            <div></div>
            <div>
              <!--<span>剩余</span>-->
              <!--<div class="y" style="margin-left: 5px;">-->
                <!--<span style="line-height: 20px;text-align: center;color: white;margin: 0 auto;display: block;">{{h}}</span>-->
              <!--</div>-->
              <!--<p style="color: #cecece;font-weight: bold;display: block;line-height: 48px;margin: 0 5px 0 5px;">:</p>-->
              <!--<div class="y">-->
                <!--<span style="line-height: 20px;text-align: center;color: white;margin: 0 auto;display: block;">{{m}}</span>-->
              <!--</div>-->
              <!--<p style="color: #cecece;font-weight: bold;display: block;line-height: 48px;margin: 0 5px 0 5px;">:</p>-->
              <!--<div class="y" style="margin-right: 5px;">-->
                <!--<span style="line-height: 20px;text-align: center;color: white;margin: 0 auto;display: block;">{{s}}</span>-->
              <!--</div>-->
              <!--&lt;!&ndash;<p style="color: #cecece;font-weight: bold;display: block;line-height: 48px;margin: 0 5px 0 5px;">:</p>&ndash;&gt;-->
              <!--<span>结束</span>-->
                <span v-html="sTime2"v-show="sTime2 != ''"></span>
                <span v-show="sTime2 == ''">
                  <span data-v-ca785d7a=""><span>00</span>天<span>10</span>时<span>00</span>分<span>00</span>秒</span> <span data-v-ca785d7a="" style="display: none;"></span>
                </span>
            </div>
            <div></div>
          </div>
          <div data-v-dbc985ae="" class="common-form"@click="can"><div data-v-dbc985ae="" class="group-detail-play"><div data-v-dbc985ae="" class="group-detail-play-tel"><em data-v-dbc985ae=""></em> <span data-v-dbc985ae="">拼奖玩法 <!--<i data-v-dbc985ae="">&gt;</i>--></span></div> <div data-v-dbc985ae="" class="group-detail-schedule"><div data-v-dbc985ae="" class="group-detail-schedule-25"><div data-v-dbc985ae="" class="loading"><div data-v-dbc985ae="" class="loading-left"></div> <div data-v-dbc985ae="" class="loading-right"></div> <div data-v-dbc985ae="" class="progress"></div></div> <p data-v-dbc985ae="">开团/参团</p></div> <div data-v-dbc985ae="" class="group-detail-schedule-50"><div data-v-dbc985ae="" class="loading"><div data-v-dbc985ae="" class="loading-left2"></div> <div data-v-dbc985ae="" class="loading-right2"></div> <div data-v-dbc985ae="" class="progress"></div></div> <p data-v-dbc985ae="">邀请好友</p></div> <div data-v-dbc985ae="" class="group-detail-schedule-75"><div data-v-dbc985ae="" class="loading"><div data-v-dbc985ae="" class="loading-left3"></div> <div data-v-dbc985ae="" class="loading-right3"></div> <div data-v-dbc985ae="" class="progress"></div></div> <p data-v-dbc985ae="">拼团成功</p></div> <div data-v-dbc985ae="" class="group-detail-schedule-100"><div data-v-dbc985ae="" class="loading"><div data-v-dbc985ae="" class="loading-left4"></div> <div data-v-dbc985ae="" class="loading-right4"></div> <div data-v-dbc985ae="" class="progress"></div></div> <p data-v-dbc985ae="">等待抽奖</p></div></div></div></div>

          <!--<div style="width: 100%;height: 42.5px;text-align: center;">-->
            <!--<span style="font-size: 18px;line-height: 42.5px;">展开拼团列表</span>-->
            <!--<span class="el-icon-arrow-down" style="font-size: 18px;line-height: 42.5px;"></span>-->
          <!--</div>-->
        </div>
        <div style="width: 100%;height: 15px; background-color: #f4f4f4;"></div>
      </div>
      <!--<div style="width: 10vh;height: 12vh;background-color: rgb(113, 127, 125);position: absolute;right: -5vh;top: 35vh;z-index: 999;"@click="can"v-show="can1">-->
        <!--<p style="color: white;text-align: left;text-indent: 10px;word-wrap:break-word">参</p>-->
        <!--<p style="color: white;text-align: left;text-indent: 10px;word-wrap:break-word">团</p>-->
        <!--<p style="color: white;text-align: left;text-indent: 10px;word-wrap:break-word">须</p>-->
        <!--<p style="color: white;text-align: left;text-indent: 10px;word-wrap:break-word">知</p>-->
      <!--</div>-->
      <div style="width: 100%;">
        <el-button style="width: 94%;margin: 0 auto;display: block;background-color: #ea1213;color: white;border-bottom: 1px solid silver;"@click="open">{{row.team_num_no==0?'拼团人数已满-可开团':end_time==0?'拼团已结束':DataList.limit_one==true?'一键开团':'一键参团'}}</el-button>
      </div>
      <div style="width: 100%;height: 100px;"></div>
      <div style="width: 100%;height: 50%;position: fixed;bottom: 0;z-index: 10;"v-show="move">
        <div data-v-dbc985ae="" class="footer-standard" style="">
          <div data-v-dbc985ae="" class="footer-standard-shop">
            <img data-v-dbc985ae="" :src="imgTitl+thumb" alt="">
            <div data-v-dbc985ae="">
              <!--<p data-v-dbc985ae="" style="display: none;">￥<em data-v-dbc985ae="">1123</em></p>-->
              <p data-v-dbc985ae="" style="">￥<em data-v-dbc985ae="">{{market_price==''?market_price:team_price}}</em></p>
              <p data-v-dbc985ae=""><em data-v-dbc985ae="">选择</em>：{{spec_2}}&nbsp;1件</p>
            </div>
          </div>
          <div data-v-dbc985ae="" class="footer-standard-num">
            <p data-v-dbc985ae="">规格</p>
            <div data-v-dbc985ae="">&nbsp;</div>
            <div style="display: flex;">
              <div data-v-dbc985ae="" style="display: flex; flex-wrap: wrap;"v-for="(item,index) in Spec"@click="clic(index)">
                <div data-v-dbc985ae=""><em data-v-dbc985ae="" v-bind:class="{ active: isActive === index }">{{item.spec_2}}</em></div>
              </div>
            </div>
          </div>
          <div data-v-dbc985ae="" class="footer-standard-num">
            <p data-v-dbc985ae="">数量</p>
            <div data-v-dbc985ae="" class="goods-num">
              <span data-v-dbc985ae="" class="sub">-</span>
              <span data-v-dbc985ae="" class="num">
                <input data-v-dbc985ae="" type="text"v-model="mas">
              </span>
              <span data-v-dbc985ae="" class="add">+</span>
            </div>
          </div>
          <button data-v-dbc985ae="" class="detail-btn"@click="sure"style="">确定</button>
        </div>
      </div>

      <div data-v-dbc985ae="" style="width: 100%; height: 455px; background-color: whitesmoke; position: fixed; bottom: 0px; z-index: 9;"v-show="shou">
        <p data-v-dbc985ae="" style="margin-top: 10px; margin-left: 23px; margin-bottom: 10px; font-size: 14px; color: palevioletred;">
          <span data-v-dbc985ae="">.</span>
          <span data-v-dbc985ae="">拼奖玩法介绍</span>
          <span style="text-align: right;float: right;margin-right: 23px;"@click="o">X</span>
        </p>
        <div data-v-dbc985ae="" style="width: 90%; height: 1px; background-color: silver; margin: 0px auto;"></div>
        <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; margin-top: 10px; font-size: 12px; line-height: 20px;">
        1、本公司承诺所有拼团商品均为正品；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        2、商品价格为出厂价，本公司用于推广宣传，不计成本，物美价廉；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        3、开团：选择心仪商品，点击“一键开团”按钮，付款后即视为开团成功；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        4、参团：进入好友分享的页面，点击“立即参团”按钮，付款后即为参团成功，若多人同时支付，支付成功的时间较早的人获得参团资格；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        5、成团：在开团或参团成功后，点击“邀根据提示分享页面链接给好友”将页面分享给好友，在有效的时间内凑齐人数即为成团。
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        6、组团失败：在有效时间内未凑齐人数，即为组团失败，此时，将发起退款，款项将原路返回。
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        7、活动结束后将从拼单成功的订单中随机抽取中奖者；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px; font-size: 12px; line-height: 20px;">
        8、中奖商品于拼团结束后发放；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px;">
        9、组团有效期间内，拼团商品订单不允许取消；
      </p> <p data-v-dbc985ae="" style="margin-left: 23px; margin-right: 23px;">
        10、商品售完时，未能拼团者视为购买失败，将发起退款，款项将原路返回。
      </p></div>
      <div data-v-dbc985ae="" style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; z-index: 9; top: 0px;"v-show="zhezhao"@click="zhe"></div>
    </div>
</template>

<script>
  import Swiper from '../../../node_modules/swiper';
  import '../../../node_modules/swiper/dist/css/swiper.min.css';
  import {myfun} from './test'
  import {onload_leftTime_jx} from './lefttime'
  import axios from 'axios';
  import qs from 'qs';

  export default {
    name: 'AssMeration',
    data(){
      return{
        imgTitl: 'http://39.96.76.3/HuiWanZhong/public/uploads/',
        DataList:[],
        GoodLisr:[],
        Team_List:[],
        Spec:[],
        move:false,
        isActive:-1,
        mas:'1',
        market_price:'',
        team_price:'',
        spec_2:'',
        thumb:'',
        id:'',
        goods_id:'',
        end_time:'',
        h:'',
        m:'',
        s:'',
        sTime2:'1',
        row:[],
        List2:[],
        shou:false,
        can1:true,
        common_id:'',
        zhezhao:false,
      }
    },
    created(){
      let restoredSession = JSON.parse(sessionStorage.getItem('Mera'));
      setInterval(()=>{
        let sTime = JSON.parse(sessionStorage.getItem('sTime'));
        this.sTime2 = sTime
      },1000);
      this.DataList = restoredSession;
      this.GoodLisr = this.DataList.goods;
      this.List = this.DataList.list;
      this.Spec = this.DataList.goods.spec;
      this.thumb = this.Spec[0].thumb;
      this.row = this.DataList.row;
      this.end_time = restoredSession.row.end_time;
      // this.end_time = this.end_time-10;
      this.h = parseInt(Number(this.end_time/3600));
      let a = Number(this.end_time/3600)
      let str = a.toString().split('.');
      let b = Number(str[str.length-1]);
      this.m = parseInt(b/10000*60);
      let c = b/10000*60;
      let str2 = c.toString().split('.');
      let d = str2[str2.length-1]/100;
      this.s = d*60;
      this.market_price = this.Spec[0].market_price;
      this.team_price = this.Spec[0].team_price;
      this.common_id = this.DataList.list[this.DataList.list.length-1].common_id;
      this.onload_();
    },
    mounted () {
      var swiper = new Swiper('.swiper-container', {
        slidesPerView: 4,
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true,
        o:'',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      });
    },
    methods: {
      diyfun:function(){
        myfun();
      },
      onload_(){
        let a = this.end_time;
        onload_leftTime_jx('jqr',a,"span","zh");
      },
      can(){
        this.shou = true;
        this.can1 = false;
      },
      o(){
        this.shou = false;
        this.can1 = true;
      },
      open () {
        this.zhezhao = true;
        if (this.end_time != 0 && this.row.team_num_no != 0 && this.DataList != true){
        } else {
        }
        this.move = true;
      },
      zhe(){
        this.move = false;
        this.zhezhao = false;
      },
      plec () {
        this.move = false;
      },
      clic (index) {
        this.isActive = index;
        this.market_price = this.Spec[index].team_price;
        this.spec_2 = this.Spec[index].spec_2;
        this.thumb = this.Spec[index].thumb;
        this.id = this.Spec[index].id;
        this.goods_id = this.Spec[index].goods_id;
      },
      sure () {
          axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/add_cart', qs.stringify({
            'uId': localStorage.getItem('openid'),
            'num': this.mas,
            'spec': this.id,
            'common_id': this.common_id,
            'id': this.goods_id,
            'type': '1',
          })).then(re => {
            if (re.data.status == false){
              alert(re.data.message);
            } else {
              this.List2 = re.data.data;
              // this.List2.spec_2 = this.spec2;
              // this.List2.thumb = this.spec.thumb;
              // this.List2.type = this.type;
              // this.List2.pri = this.pri;
              // this.List2.market_price2 = this.info.market_price;
              this.List2.thumb2 = this.thumb;
              // this.market_price =
              // 存储用户信息，
              sessionStorage.setItem('List', JSON.stringify(''));
              sessionStorage.setItem('List', JSON.stringify(this.List2));
              this.$router.push({name: 'AssembleOrder'});
            }
          });
      },
    }
  }
</script>

<style scoped>
  #AssMeration{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
  }
  .header{
    width: 100%;
    height: 41.5px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
  }
  .header div:nth-child(1) span:nth-child(1){
    font-size: 17.5px;
    font-weight: bold;
    line-height: 41.5px;
    margin-left: 16px;
  }
  .header div:nth-child(2){
    width: 60%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .header div:nth-child(2) span:nth-child(1){
    line-height: 41.5px;
    font-weight: bold;
  }
  .header div:nth-child(3) span:nth-child(1){
    font-size: 17.5px;
    font-weight: bold;
    line-height: 41.5px;
    margin-right:16px;
  }
  .group{
    width: 100%;
    height: 125.5px;
    background-color: #f4f4f4;
    display: flex;
    border-bottom: 1px solid #e1e1e1;
  }
  .group .left{
    width: 116.5px;
    height: 116.5px;
    position: relative;
    margin-left: 15px;
  }
  .group .left div:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .group .right{
    flex: 1;
    background-color: #1E9FFF;
  }
  .group .right div:nth-child(1){
    display: flex;
  }
  .group .right div:nth-child(1) div:nth-child(1){
    width: 44.5px;
    height: 21.5px;
    background-color: #ec1210;
    border-radius: 5px;
    position: relative;
    margin-top: 9.5px;
    margin-left: 9.5px;
  }
  .group .right div:nth-child(1) div:nth-child(1) span:nth-child(1){
    line-height: 21.5px;
    color: white;
    font-size: 12px;
    text-align: center;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .group .right div:nth-child(1) div:nth-child(2){
    margin-right: 21px;
    margin-left: 6px;
    margin-top: 9.5px;
  }
  .group .right div:nth-child(1) div:nth-child(2) span:nth-child(1){
  }
  .group .right2 div:nth-child(1) div:nth-child(1){
    width: 100%;
    display: flex;
  }
  .group .right2 div:nth-child(1) div:nth-child(1) span:nth-child(1){
    display: block;
    width: 44.5px;
    height: 21.5px;
    background-color: #f1100e;
    line-height: 21.5px;
    text-align: center;
    color: white;
    border-radius: 5px;
    margin-top: 9px;
    margin-left: 13px;
  }
  .group .right2 div:nth-child(1) div:nth-child(1) span:nth-child(2){
    margin-top: 9px;
    margin-left: 7px;
    margin-right: 21px;
  }
  .money{
    width: 100%;
    margin-left: 13px;
    margin-top: 13px;
  }
  .group .money span:nth-child(1){
  }
  .conten{
    width: 100%;
    height: auto;
  }
  .conten .huaxian{
    width: 100%;
  }
  .conten .huaxian{
    display: flex;
    justify-content: space-between;
  }
  .conten .huaxian div:nth-child(1){
    width: 30%;
    height: 1px;
    background-color: #cecece;
    margin-top: 24px;
  }
  .conten .huaxian div:nth-child(2){
    display: flex;
    justify-content: space-around;
  }
  .conten .huaxian div:nth-child(2) span{
    line-height: 48px;
  }
  .conten .y{
    display: block;
    width: 26px;
    height: 20px;
    background-color: #666666;
    margin-top: 14px;
    border-radius: 5px;
  }
  .conten .huaxian div:nth-child(3){
    width: 30%;
    height: 1px;
    background-color: #cecece;
    margin-top: 24px;
  }
  .active{
    color: deeppink;
  }
  /*拼团详情*/
  .team-footer a:nth-child(3),.team-footer a:nth-child(4){
    width:30%;
    height:49px;
    float:left;
    text-align: center;
    background-color: rgba(255, 139, 0, 1);
  }
  .team-footer a:nth-child(4){
    background: #FE2746;
  }
  .team-footer a:nth-child(3) p,.team-footer a:nth-child(4) p,.team-footer a:nth-child(3) em,.team-footer a:nth-child(4) em{
    color:#FFF;
  }
  .team-footer a:nth-child(3) em,.team-footer a:nth-child(4) em{
    margin-top: 5px;
    display: inline-block;
  }
  .group-detail-btn{
    width: 94%;
    margin:10px auto;
  }
  .group-detail-btn a{
    width: 77px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    border-radius: 5px;
    background-color: rgba(252, 40, 71, 1);
    text-align: center;
    color:#FFF;
    font-weight: 600;
    font-size:12px;
  }
  .group-detail-btn em{
    height: 24px;
    display: inline-block;
    color: #FE2746;
    font-size: 12px;
    line-height: 24px;
    border-radius: 5px;
    background-color: rgba(252, 40, 71, 0.07);
    text-align: center;
    margin-left: 10px;
    padding: 0 10px;
  }
  .group-detail-play-tel{
    height:38px;
    line-height: 38px;
    padding: 0 8px;
  }
  .group-detail-play-tel em {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FE2746;
    display: inline-block;
    margin: 2px 6px;

  }
  .group-detail-play-tel span{
    font-weight: 600;
    color: #FE2746;
    width: 90%;
    border-bottom: 1px solid #f2f2f2;
    display: inline-block;
  }
  .group-detail-play-tel span i{
    font-weight: 100;
    color:#FE2746;
    float:right;
  }
  .group-detail-spell{
    padding-bottom: 10px;
  }
  .group-detail-spell-tel{
    padding: 9px 0;
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid #f2f2f2;
  }
  .group-detail-spell-tel i{
    float: right;
  }
  .group-detail-schedule{
    margin-top:12px;
  }
  .group-detail-spell-shop{
    width:94%;
    margin:0 auto;
    height:50px;
    line-height: 50px;
  }
  .group-detail-spell-shop a{
    width: 62px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 1);
    text-align: center;
    color: #FFF;
    font-size: 12px;
    float: right;
    margin-top:10px;
  }
  .group-detail-spell-shop img{
    width:30px;
    height:30px;
    float: left;
    border-radius: 50%;
    margin-top:10px;
  }
  .group-detail-spell-shop span:nth-child(2){
    font-size:12px;
    margin-left: 5px;
  }
  .group-detail-spell-shop span:nth-child(3){
    font-size:12px;
    color:#999;
    margin-left: 5px;
  }
  .group-detail-spell-shop span:nth-child(5){
    font-size:12px;
    float: right;
    margin-right: 10px;
  }
  .group-detail-spell-shop span:nth-child(5) em{
    font-size:12px;
    color:#FE2746;
  }
  .group-detail-schedule-50,.group-detail-schedule-25,.group-detail-schedule-75,.group-detail-schedule-100{
    width:25%;
    float:left;
    text-align: center;
    padding-bottom: 10px;
  }
  .group-detail-schedule-50 p,.group-detail-schedule-25 p,.group-detail-schedule-75 p,.group-detail-schedule-100 p{
    font-size:12px;
  }
  /*环形进度条*/
  .loading {
    width: 30px;
    height: 30px;
    position: relative;
    margin-left: 30%;
    padding-bottom: 10px;
  }
  .loading .progress {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    left:5px;
    top: 5px;
    text-align: center;
  }

  .loading-left,
  .loading-right {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left {
    border-radius: 112px 0 0 112px;
  }
  .loading-right {
    border-radius: 0 112px 112px 0;
  }
  .loading-left:after,
  .loading-right:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left:after {
    transform-origin: right center;
  }

  .loading-right:after {
    transform-origin: left center;
    transform: rotateZ(90deg);
  }
  /*第二个*/
  .loading-left2,
  .loading-right2 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left2 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right2 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left2:after,
  .loading-right2:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right2:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left2:after {
    transform-origin: right center;
  }

  .loading-right2:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }


  /*第三个*/
  .loading-left3,
  .loading-right3 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left3 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right3 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left3:after,
  .loading-right3:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right3:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left3:after {
    transform-origin: right center;
    transform: rotateZ(90deg);
  }

  .loading-right3:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }


  /*第四个*/
  .loading-left4,
  .loading-right4 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left4 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right4 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left4:after,
  .loading-right4:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right4:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left4:after {
    transform-origin: right center;
    transform: rotateZ(180deg);
  }
  .loading-right4:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }
  .active{
    color: deeppink;
  }
  .anctt{
    animation: mymove 5s infinite;
  }
  @keyframes mymove
  {
    from {color: #00F7DE;}
    to {color: rebeccapurple;}
  }
</style>
